<template>
  <div style="position:relative">
    <el-row :gutter="20">
      <el-col :span="8" :xs="24">
        <el-card style="margin-top: 15px; margin-left: 15px">
          <div slot="header" class="clearfix">
            <span>About me</span>
          </div>

          <div class="user-profile">
            <!-- <div class="box-center">
          <div>Hello</div>
          {{ userInfo.name }}
      </div> -->
            <div class="box-center">
               <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
              <div class="user-name text-center" style="font-size:20px">{{ userInfo.name }}</div>
              <div v-if="userInfo.type==='0'" class="user-role text-center text-muted">
                {{ userInfo.major }}
              </div>
            </div>
          </div>

          <div class="user-bio">
            <!-- <div class="user-education user-bio-section" style="margin-top:25px">
              <div class="user-bio-section-header">
                <svg-icon icon-class="education" /><span>Education</span>
              </div>
              <div class="user-bio-section-body">
                <div class="text-muted">
                  JS in Computer Science from the University of Technology
                </div>
              </div>
            </div> -->

            <div class="user-skills user-bio-section" style="margin-top:40px">
              <div class="user-bio-section-header">
                <svg-icon icon-class="skill" /><span>技能</span>
              </div>
              <div class="user-bio-section-body">
                <div class="progress-item">
                  <span>专业技能</span>
                  <el-progress :percentage="userInfo.majorAbilityScore" />
                </div>
                <div class="progress-item">
                  <span>阅读技能</span>
                  <el-progress :percentage="userInfo.readingAbilityScore" />
                </div>
                <div class="progress-item">
                  <span>语言技能</span>
                  <el-progress :percentage="userInfo.speakingAbilityScore" />
                </div>
                <div class="progress-item">
                  <span>写作技能</span>
                  <el-progress :percentage="userInfo.writingAbilityScore" />
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" :xs="24">
          <el-card style="margin-top: 15px; margin-left: 15px">
              <div style="margin-bottom:15px">
                  <span>账号：{{userInfo.accountNumber}}</span>
              </div>
              <div style="margin-bottom:15px">
                  <span>身份：{{userInfo.type==='0'?'普通用户':'管理员'}}</span>
              </div>
              <div style="margin-bottom:15px">
                  <span>信用值：{{userInfo.credit}}</span>
              </div>
              <div style="margin-bottom:15px">
                  <span>性别：{{userInfo.sex==='0'?'男':'女'}}</span>
              </div>
              <div style="margin-bottom:15px">
                  <span>生日：{{userInfo.birthday}}</span>
              </div>
          </el-card>
      </el-col>
    </el-row>
    <el-button style="position:absolute;bottom:-50px;right:30px" @click.native.prevent="dialogFormVisible=true">编辑</el-button>
     <!--修改 模态框-->
    <el-dialog
      title="编辑个人信息"
      :visible="dialogFormVisible"
      width="550px"
    >
      <el-form
        :model="userInfoForm"
        label-width="90px"
      >
        <el-form-item label="姓名：" prop="name">
          <el-input
            v-model="userInfoForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="userInfoForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="userInfo.type==='1'" label="信用值" prop="credit">
          <el-input
            v-model="userInfoForm.credit"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份：" prop="type">
          <el-radio :disabled='disabled' v-model="userInfoForm.type" label="0">普通用户</el-radio>
          <el-radio :disabled='disabled' v-model="userInfoForm.type" label="1">管理员</el-radio>
        </el-form-item>
        <el-form-item v-if="userInfo.type==='0'" label="专业：" prop="major">
          <el-input
            v-model="userInfoForm.major"
          ></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
            <el-date-picker
                v-model="userInfoForm.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="userInfoForm.sex" placeholder="请选择性别" >
                <el-option
                label="男"
                value="0">
                </el-option>
                <el-option
                label="女"
                value="1">
                </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="专业技能：" prop="majorAbilityScore">
          <el-input
            v-model="userInfoForm.majorAbilityScore"
            type="number"
            min="0" max="100"
            placeholder="请输入0-100之间的数字"
          ></el-input>
        </el-form-item>
        <el-form-item label="阅读技能：" prop="readingAbilityScore">
          <el-input
            v-model="userInfoForm.readingAbilityScore"
          ></el-input>
        </el-form-item>
        <el-form-item label="写作技能：" prop="writingAbilityScore">
          <el-input
            v-model="userInfoForm.writingAbilityScore"
          ></el-input>
        </el-form-item>
        <el-form-item label="语言技能：" prop="speakingAbilityScore">
          <el-input
            v-model="userInfoForm.speakingAbilityScore"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editUserInfo"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import webservice from "@/utils/webservice";

export default {
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
      dialogFormVisible:false,
      pageTypeRules:[],
      userInfoForm:{},
      avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      disabled:true,
    };
  },
  created(){
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
  },
  mounted(){
    this.userInfoForm = JSON.parse(JSON.stringify(this.userInfo)) 
    if(this.userInfo.type==='1'){
      this.disabled = false
    }
  },
  methods:{
      editUserInfo(){
          const _param = {
            id:this.userInfo.id,
          name: this.userInfoForm.name,
          password:this.userInfoForm.password,
          credit:this.userInfoForm.credit,
          birthday:this.userInfoForm.birthday,
          sex:this.userInfoForm.sex,
          type:this.userInfoForm.type,
          major:this.userInfoForm.major,
          majorAbilityScore:this.userInfoForm.majorAbilityScore,
          speakingAbilityScore:this.userInfoForm.speakingAbilityScore,
          readingAbilityScore:this.userInfoForm.readingAbilityScore,
          writingAbilityScore:this.userInfoForm.writingAbilityScore,
          };
          const _params = JSON.stringify(_param)
          webservice.HttpPost("/api/user/updateUser", _params, (data) => {
            if (data.code === 200) {
              this.$message.success({
                message: '编辑成功！',
                showClose: true,
                duration: 1000,
              });
              this.dialogFormVisible = false
              sessionStorage.setItem('userInfo',JSON.stringify(data.data))
              // this.resetSetItem('userInfo',JSON.stringify(data.data));
               
              this.$router.go(0)
            } else {
              this.$message.error({
                message: data.message,
                showClose: true,
                duration: 1000,
              });
            }
          });
      },
  }
};
</script>

<style lang="scss">
.clearfix{
  display: flex;
  flex-direction: column;
}
.user-avatar{
  // width: 30%;
border-radius: 50%;
margin: 0 auto 20px auto;
}
    /**
    * 解决el-input设置类型为number时，中文输入法光标上移问题
    **/
    .el-input__inner{
      line-height: 1px!important;
    }
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 15px;
  }

  .user-role {
    padding-top: 15px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 15px;
      margin-bottom: 15px;
      font-weight: bold;
    }
  }
}
</style>
